<template>
    <div>
    <h2>侦听器</h2>
    请输入问题: <input type="text" v-model="question" />
    <div>{{ anwser }}</div>
    <hr />
    <h3>侦听器的配置选项-handler配置</h3>
    <h2>{{ info.name }}</h2>
    <h2>{{ info.book.name }}</h2>
    <button @click="changeInfo">改变info</button>
    <button @click="changeInfoName">改变info.name</button>
    <button @click="changeInfoBookName">改变info.book.name</button>
    <hr />
    <div>
      <p>
        watchEffect
        也是一个帧听器，是一个副作用函数它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听
      </p>
      <input type="text" v-model="effectValue" />
      <button @click="stopWatchEffect">停止监听</button>
    </div>
  </div>
</template>

<script setup>
defineOptions({
    name: 'ztq'
})
import { ref, watch, reactive, watchEffect, } from 'vue'

const question = ref('')
const anwser = ref('')
const effectValue = ref('不是哥们，这是effectValue')
let info = reactive({name: '张三',age: 18,book: {name: 'vue.js2'}})


// watch(question, (newValue, oldValue) => {
//     console.log('question新值', newValue, 'question旧值', oldValue)
//      // 4.question 变化后调用 queryAnswer() 方法
//      queryAnswer()
// })
// const queryAnswer = () => {
//     anwser.value = `你的问题是: ${question.value}? 答案: 哈哈哈哈哈！`
// }


// 监听的是对象
// watch(
//     info,
//     (newInfo, oldInfo) => {
//         console.log('info新值:', newInfo, 'info旧值:', oldInfo)
//     },
//     {
//         deep: true,
//         immediate:true
//     }
// )

// const changeInfo = () => {
//     info = Object.assign(info,  { name: 'kobe', age: 18, book: { name: 'vue.js3' }})
// }

// 监听单个属性
// watch(
//     () => info.name,
//     (newName, oldName) => {
//         console.log('info.name新值:', newName, 'info.name旧值:', oldName)
//     },
//     {
//         deep: false,
//         immediate: false
//     }
// )


// const changeInfoName = () => {
//     info.name = 'rose'
// }

// const changeInfoBookName = () => {
//   info.book.name = 'React'
// }

// 监听多个响应式数据 必须都要变化才能显示console。log（）
// watch([() => info.name, question], (newVal) => {
//     console.log('监听多个响应式数据数据值改变了。', newVal)
// })


// watchEffect
const stop = watchEffect(() => {
    console.log('effectValue', effectValue.value)
})

const stopWatchEffect = () => {
    console.log('停止监听')
    stop()
}


 </script>

<style  lang="scss" scoped>
</style>